<!-- 系统公告 - 已优化: 
1. 添加了返回列表按钮在轮播图下方和底部
2. 显示了文章标题 
3. 调整了轮播图样式与首页保持一致
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>系统公告</title>
		<link rel="stylesheet" href="../../layui/css/layui.css">
		<link rel="stylesheet" href="../../css/swiper.min.css">
		<!-- 样式 -->
		<link rel="stylesheet" href="../../css/style.css" />
		<!-- 主题（主要颜色设置） -->
		<link rel="stylesheet" href="../../css/theme.css" />
		<!-- 通用的css -->
		<link rel="stylesheet" href="../../css/common.css" />
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
	</head>
	<style>
		html::after {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			content: '';
			display: block;
			background-attachment: fixed;
			background-size: cover;
			background-position: center;
			background-color: #f2f7f6;
			z-index: -1;
		}
		
		body {
			font-family: 'Microsoft YaHei', Arial, sans-serif;
			color: #333;
			background-color: #f2f7f6;
		}

		.page-container {
			width: 100%;
			max-width: 1280px; 
			margin: 0 auto;
			padding: 0 10px;
			box-sizing: border-box;
		}

		/* 轮播图样式 */
		#swiper {
			overflow: hidden;
			border-radius: 6px;
			margin: 20px auto 30px;
			box-shadow: 0 2px 10px rgba(0,0,0,0.08);
			height: 350px;
		}

		.layui-carousel {
			height: 350px !important;
		}

		.layui-carousel img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		#swiper .layui-carousel-ind {
			position: absolute;
			bottom: 20px;
			text-align: center;
			width: 100%;
		}

		#swiper .layui-carousel-ind li {
			width: 30px;
			height: 6px;
			border-width: 0;
			border-style: solid;
			border-color: transparent;
			border-radius: 3px;
			background-color: rgba(255, 255, 255, 0.6);
			margin: 0 4px;
		}

		#swiper .layui-carousel-ind li.layui-this {
			width: 50px;
			height: 6px;
			border-width: 0;
			border-style: solid;
			border-color: transparent;
			border-radius: 3px;
			background-color: #3a7e6f;
		}
		
		/* 详情页样式 */
		.content-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 20px;
			background-color: #3a7e6f;
			color: #fff;
			border-radius: 6px;
			margin-bottom: 20px;
			box-shadow: 0 2px 10px rgba(0,0,0,0.08);
		}
		
		.content-title .title {
			font-size: 16px;
			color: #fff;
			line-height: 1.4;
			font-weight: 500;
		}
		
		.content-title .position {
			font-size: 14px;
			color: rgba(255, 255, 255, 0.8);
			line-height: 1.4;
		}
		
		/* 列表项样式 */
		.detail-item {
			background: #fff;
			padding: 30px;
			box-sizing: border-box;
			border-radius: 6px;
			box-shadow: 0 2px 10px rgba(0,0,0,0.08);
			margin-bottom: 30px;
		}
		
		.detail-item .title {
			text-align: center;
			font-size: 22px;
			color: #333;
			font-weight: bold;
			margin-bottom: 10px;
		}
		
		.detail-item .time {
			text-align: center;
			font-size: 14px;
			color: #999;
			padding-bottom: 20px;
			border-bottom: 1px dashed #e0e0e0;
			margin-bottom: 20px;
		}
		
		.detail-item .content {
			line-height: 1.8;
			color: #333;
			font-size: 15px;
		}
		
		.detail-item .content p {
			margin-bottom: 10px;
		}
		
		.detail-item img {
			max-width: 100%;
			height: auto;
		}
		
		/* 分页器 */
		.layui-laypage .layui-laypage-curr .layui-laypage-em {
			background-color: #3a7e6f;
		}
		
		.layui-laypage a:hover {
			color: #3a7e6f;
		}
		
		/* 底部按钮样式 */
		.btn-container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			padding: 15px 20px;
			border-radius: 6px;
			box-shadow: 0 2px 10px rgba(0,0,0,0.08);
			margin-bottom: 20px;
			position: relative;
			z-index: 1;
		}

		.btn-container .title {
			font-size: 15px;
			color: #666;
			margin: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 60%;
		}

		.btn-container .btn-back {
			background-color: #3a7e6f;
			color: #fff;
			border: none;
			padding: 8px 18px;
			border-radius: 4px;
			cursor: pointer;
			font-size: 14px;
			transition: all 0.3s;
			display: flex;
			align-items: center;
			flex-shrink: 0;
		}

		.btn-container .btn-back:hover {
			background-color: #2d6557;
		}

		.btn-container .btn-back i {
			margin-right: 5px;
		}
		
		/* 响应式适配 */
		@media screen and (max-width: 768px) {
			.detail-item {
				padding: 20px;
			}
			
			.detail-item .title {
				font-size: 18px;
			}
			
			.btn-container {
				flex-direction: column;
				align-items: flex-start;
			}
			
			.btn-container .title {
				margin-bottom: 10px;
				max-width: 100%;
			}
			
			.btn-container .btn-back {
				width: 100%;
				justify-content: center;
			}
		}
	</style>
	<body>
		<div id="app">
			<div class="page-container">
				<div class="layui-carousel" id="swiper">
					<div carousel-item id="swiper-item">
						<div v-for="(item,index) in swiperList" v-bind:key="index">
							<img class="swiper-item" :src="item.img">
						</div>
					</div>
				</div>
				
				<div class="content-title">
					<div class="title">系统公告</div>
					<div class="position">您现在的位置：系统公告详情</div>
				</div>
				
				<div class="detail-item">
					<div class="title">{{title}}</div>
					<div class="time">发布时间：{{addtime}}</div>
					<div class="content" v-html="content"></div>
				</div>
				
				<!-- 底部返回按钮 -->
				<div class="btn-container">
					<div class="title">本篇文章：{{title}}</div>
					<button @click="jump('../news/list.html')" type="button" class="btn-back">
						<i class="fas fa-arrow-left"></i> 返回列表
					</button>
				</div>
			</div>
		</div>

		<!-- layui -->
		<script src="../../layui/layui.js"></script>
		<!-- vue -->
		<script src="../../js/vue.js"></script>
		<!-- 组件配置信息 -->
		<script src="../../js/config.js"></script>
		<!-- 扩展插件配置信息 -->
		<script src="../../modules/config.js"></script>
		<!-- 工具方法 -->
		<script src="../../js/utils.js"></script>

		<script>
			var vue = new Vue({
				el: '#app',
				data: {
					// 轮播图
					swiperList: [],
					detail: {},
					id: '',
					title: '',
					addtime: '',
					content: ''
				},
				methods: {
					jump(url) {
						jump(url)
					}
				}
			})

			layui.use(['layer', 'element', 'carousel', 'http', 'jquery'], function() {
				var layer = layui.layer;
				var element = layui.element;
				var carousel = layui.carousel;
				var http = layui.http;
				var jquery = layui.jquery;

				var id = http.getParam('id');
				vue.id = id;

				// 获取轮播图 数据
				http.request('config/list', 'get', {
					page: 1,
					limit: 5
				}, function(res) {
					if (res.data.list.length > 0) {
						let swiperList = [];
						res.data.list.forEach(element => {
							if (element.value != null) {
								swiperList.push({
									img: http.baseurl + element.value
								});
							}
						});
						vue.swiperList = swiperList;
						
						vue.$nextTick(() => {
							carousel.render({
								elem: '#swiper',
								width: '100%',
								height: '350px',
								arrow: 'hover',
								anim: 'default',
								autoplay: 'true',
								interval: '3000',
								indicator: 'inside'
							});
						})
					}
				});

				// 详情信息
				http.request('news/detail/' + id, 'get', {}, function(res) {
					vue.detail = res.data
					vue.title = res.data.title;
					vue.addtime = res.data.addtime;
					vue.content = res.data.content;
				});
			});
		</script>
	</body>
</html>
